<template>
  <div class="truename">
    <div class="titles">工资代发统计</div>
    <el-row class="content" v-if="!isYcUser()">
      <el-col :span="4" v-for="item in salaryCountList" :key="item.id">
        <div>
          <p class="title">
            {{ item.title }}
            <el-tooltip
              content="Top center"
              placement="top"
              effect="dark"
              v-if="isEsUser()"
            >
              <div slot="content">
                {{ item.tip }}
              </div>
              <i class="icon iconfont iconhuabanfuben"></i>
            </el-tooltip>
          </p>
          <p class="num">
            <span class="fontColor">{{ item.value }}</span
            >{{ item.unit }}
          </p>
        </div>
      </el-col>
    </el-row>
    <el-row class="salaryContent" v-if="!isYcUser()">
      <el-col :span="12">
        <div class="titles">
          <el-tabs v-model="activename" @tab-click="issHandleClick">
            <el-tab-pane label="代发金额" name="MONEY"></el-tab-pane>
            <el-tab-pane label="代发人次" name="PERSON"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="lineChart" id="lineChart"></div>
      </el-col>
      <el-col :span="12" class="right">
        <el-table
          :data="ssuingTableData"
          height="268"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec; margin-top: 30px"
        >
          <el-table-column prop="year" label="月份">
            <template slot-scope="scope">
              <p>{{ scope.row.year }}年{{ scope.row.month }}月</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalPaidMoneyStr"
            label="代发金额（万元）"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="totalPaidTimesStr"
            label="代发人次（人次）"
            align="center"
          ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row class="content" v-if="isYcUser()">
      <el-col :span="4" v-for="item in ycSalaryCountList" :key="item.id">
        <div>
          <p class="title">
            {{ item.title }}
          </p>
          <p class="num">
            <span class="fontColor">{{ item.value }}</span
            >{{ item.unit }}
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'truename',
  data() {
    return {
      salaryCountList: [
        {
          title: '代发总金额',
          tip: '已开工项目所有工资表中到账金额之和 ',
          unit: '万元',
          id: 'totalPaidMoneyStr',
          value: '',
        },
        {
          title: '代发总人次',
          tip: '已开工项目所有工资表中到账人次之和',
          unit: '',
          id: 'totalPaidTimesStr',
          value: '',
        },
        {
          title: '本月代发金额',
          tip: '已开工项目工资表中，代发到账时间在当前自然月1号至当前日期的代发金额之和',
          unit: '万元',
          id: 'monthPaidMoneyStr',
          value: '',
        },
        {
          title: '本月代发人次',
          tip: '已开工项目工资表中，代发到账时间在当前自然月1号至当前日期的代发人次之和',
          unit: '',
          id: 'monthPaidTimesStr',
          value: '',
        },
        {
          title: '工资代发比例',
          tip: '已开工项目中，工资表有到账数据的项目占比',
          unit: '',
          id: 'salaryPaidPercent',
          value: '',
        },
        {
          title: '工资确认比例',
          tip: '已开工项目所有工资表工资到账总人次中，工资确认状态为【已确认】的占比',
          unit: '',
          id: 'salaryConfirmedPercent',
          value: '',
        },
      ],
      ycSalaryCountList: [
        {
          title: '专户代发总支出',
          tip: '所有项目所有工资表中到账金额之和 ',
          unit: '万元',
          id: 'totalPaidMoneyStr',
          value: '',
        },
        {
          title: '代发总人次',
          tip: '所有项目所有工资表中到账人次之和',
          unit: '',
          id: 'totalPaidTimesStr',
          value: '',
        },
        {
          title: '本月代发金额',
          tip: '所有工资表中，代发到账时间在当前自然月1号至当前日期的代发金额之和',
          unit: '万元',
          id: 'monthPaidMoneyStr',
          value: '',
        },
        {
          title: '本月代发人次',
          tip: '所有工资表中，代发到账时间在当前自然月1号至当前日期的代发人次之和',
          unit: '',
          id: 'monthPaidTimesStr',
          value: '',
        },
      ],
      ssuingTableData: [],
      activename: 'MONEY',
    }
  },
  props: ['areaId'],
  watch: {
    areaId() {
      this.getsalaryCountList()
      this.getStatisticalChart(this.activename)
    },
  },
  mounted() {
    this.getsalaryCountList()
    this.getStatisticalChart(this.activename)
    if (this.isWhUser()) {
      this.salaryCountList.splice(5, 1)
      this.salaryCountList.push({
        title: '工资代发人数',
        tip: '',
        unit: '',
        id: 'totalPaidNumStr',
        value: '',
      })
    }
  },
  methods: {
    issHandleClick(va) {
      this.activename = va.name
      this.getStatisticalChart(this.activename)
    },
    getsalaryCountList() {
      let url = 'api-p/projectstats/expand/overview'
      if (this.isYcUser()) {
        url = 'api-s/cs/projectstats/base/homepagesastatsyc'
      }
      this.axios.post(url, { areaId: this.areaId }).then((res) => {
        if (!res.data.hasError) {
          if (this.isYcUser()) {
            // 宜昌定制需求
            this.ycSalaryCountList.map((obj, key) => {
              obj.value = res.data.result[obj.id]
            })
          } else {
            this.salaryCountList.map((obj, key) => {
              obj.value = res.data.result[obj.id]
            })
            // if(this.isEZhouUser()){
            //     var arr = res.data.result.recentlyStats;
            //     arr.map(function(value,index,array){
            //         if(value.month == 10) {
            //         // value.totalPaidMoneyStr =0;
            //         // value.totalPaidTimesStr =0;
            //         }else {
            //         value.totalPaidMoneyStr = (((value.totalPaidMoney + 10000000) / 10000).toFixed(2)).toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,');
            //         if(value.month == 5) {
            //             value.totalPaidTimesStr =(value.totalPaidTimes + 1500).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');;
            //         }else if(value.month == 6 || value.month == 7) {
            //             value.totalPaidTimesStr =(value.totalPaidTimes + 1600).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');;
            //         }else if(value.month == 8 || value.month == 9) {
            //             value.totalPaidTimesStr =(value.totalPaidTimes + 1800).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');;
            //         }else {
            //             value.totalPaidTimesStr =(value.totalPaidTimes).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
            //         }
            //         }
            //     })
            //     this.ssuingTableData = arr;
            // }else {
            this.ssuingTableData = res.data.result.recentlyStats
            // }

            //恩施定制化需求
            if (this.isEsUser()) {
              var arr = res.data.result.recentlyStats
              this.$set(this.salaryCountList, 2, {
                title: '近六月代发金额',
                tip: '已开工项目工资表中，近六月代发金额之和',
                unit: '万元',
                id: 'monthPaidMoneyStr',
                value: this.getSumArr(arr, 'totalPaidMoney'),
              })
              this.$set(this.salaryCountList, 3, {
                title: '近六月代发人次',
                tip: '已开工项目工资表中，近六月代发人次之和',
                unit: '',
                id: 'monthPaidTimesStr',
                value: this.getSumArr(arr, 'totalPaidTimes'),
              })
              this.salaryCountList.splice(5, 1)
            }
          }
        } else {
          this.$message({
            message: res.data.errorMsg,
            type: 'error',
          })
        }
      })
    },
    //求数组中某个属性的和值
    getSumArr(arr, key) {
      if (arr.length) {
        let sum = 0
        arr.forEach((item) => {
          sum += item[key]
        })
        if (key == 'totalPaidMoney') {
          sum = (sum / 10000).toFixed(2)
        }
        return sum
      } else {
        return 0
      }
    },
    // 代发统计图
    getStatisticalChart(type) {
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/monthlychart',
        data: {
          areaId: this.areaId,
          countType: type,
        },
      }).then((res) => {
        if (!res.data.hasError) {
          this.IssuingPic(res.data.result, type)
        } else {
          this.$message({
            message: res.data.errorMsg,
            type: 'error',
          })
        }
      })
    },
    IssuingPic(result) {
      // if(this.isEZhouUser()){
      //     result.values[result.values.length-1] = 0;
      // }
      this.myChart2 = this.$echarts.init(document.getElementById('lineChart'))
      this.myChart2.setOption({
        color: ['#6395FA'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: this.activename == 'MONEY' ? '3%' : '5%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: result.dates,
            splitLine: {
              lineStyle: {
                color: '#416180',
                width: 0.5,
                opacity: 0.15,
              },
            },
            axisLabel: {
              padding: [10, 0, 0, 0],
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#485465',
                opacity: 0.15,
                width: 0.5,
                fontSize: 12,
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: this.activename == 'MONEY' ? '单位：元' : '单位：人次',
            nameTextStyle: {
              padding:
                this.activename == 'MONEY' ? [0, 0, 10, -60] : [0, 0, 10, -30],
            },
            splitLine: {
              lineStyle: {
                color: '#416180',
                width: 0.5,
                opacity: 0.15,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#A0A4AA',
                opacity: 0.15,
                width: 0.5,
                fontSize: 12,
              },
            },
          },
        ],
        series: [
          {
            name: this.activename == 'MONEY' ? '代发金额' : '代发人次',
            type: 'bar',
            barWidth: '20',
            data: result.values,
          },
        ],
      })
      window.addEventListener('resize', () => {
        this.myChart2.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.el-table {
  th > .cell,
  td > .cell {
    padding: 7px 16px !important;
  }
}
/deep/ .el-tabs__active-bar {
  background-color: #409eff !important;
}
.truename {
  margin-top: 10px;
  background-color: #fff;
  .titles {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e3e7e9;
    padding: 0 16px;
    color: #333;
    font-size: 16px;
    font-weight: 700;
  }
  .content {
    height: 104px;
    padding: 16px 8px;
    .el-col {
      padding: 0 8px;
      div {
        width: 100%;
        height: 72px;
        background: #f5f7fb;
        border-radius: 4px;
        .title {
          font-size: 14px;
          padding-top: 14px;
          height: 28px;
          line-height: 14px;
          color: #666;
          text-align: center;
        }
        .num {
          margin-top: 10px;
          height: 22px;
          line-height: 22px;
          font-size: 18px;
          color: #6395fa;
          text-align: center;
          font-weight: 700;
        }
      }
    }
  }
}
.salaryContent {
  height: 308px;
  border-top: 1px solid #e3e7e9;
  .lineChart {
    height: 265px;
  }
  .right {
    padding: 16px;
    border-left: 1px solid #e3e7e9;
    .el-table {
      margin-top: 0 !important;
    }
  }
}
/deep/.el-tabs__nav-wrap::after {
  height: 1px;
}
</style>
>
